<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-demo</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <style>
    </style>
  </head>
  <body>
    
    <div id="appfilter">
        <p>{{ message |capitalize  }}</p> 
    </div>
    <hr/>
    
  <div id="appclick">
      <p>{{ message }}</p>
      <button v-on:click="reverseMessage">反转字符串</button>
      <button @click="reverseMessage">反转字符串2</button>
  </div>
  <hr/>

    <div id="appsx">
      <p>{{ message }}</p>
      <input v-model="message">
    </div>
    <hr/>

    <div id="appzl">
        <p v-if="seen">看到表示指令值为真</p>
    </div>
    <hr/>

    <div id="appbds">
        {{5+5}}<br>
        {{ ok ? 'YES' : 'NO' }}<br>
        {{ message.split('').reverse().join('') }}
        <div v-bind:id="'list-' + id">表达式</div>
    </div>
    <hr/>

    <div id="appbind">
      <div v-bind:class="{active: isActive}">属性</div>
      <div :class="{active: isActive}">属性2</div>
    </div>
    <hr/>

    <div id="app"></div>
    <!-- built files will be auto injected -->
    <hr/>

    <div id="vue_message">
      <h6>site : {{site}}</h6>
      <h4>{{details()}}</h4>
    </div>
    <hr/>

    <div id="app2">
      <div v-html="message"></div>
    </div>
    
    <script type="text/javascript">
    //自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示
    //可以串联{{ message | filterA | filterB }}
    //过滤器是 JavaScript 函数，因此可以接受参数： {{ message | filterA('arg1', arg2) }}
    new Vue({
      el: '#appfilter',
      data: {
        message: 'abcdef'
      },
      filters: {
        capitalize: function (value) {
          if (!value) return ''
          value = value.toString()
          return value.charAt(0).toUpperCase() + value.slice(1)
        }
      }
    })

    //v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
    new Vue({
      el: '#appclick',
      data: {
        message: '双向绑定2!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })

    // v-model 指令来实现双向数据绑定
    new Vue({
      el: '#appsx',
      data: {
        message: '双向绑定值!'
      }
    })

    //指令是带有 v- 前缀的特殊属性。
    new Vue({
      el: '#appzl',
      data: {
        seen: true
      }
    })

    //Vue.js 都提供了完全的 JavaScript 表达式支持。
    new Vue({
      el: '#appbds',
      data: {
        ok: true,
        message: '表达式message',
        id : 1
      }
    })

    //HTML 属性中的值应使用 v-bind 指令。
    //参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性 <a v-bind:href="url">
    // v-on 指令，它用于监听 DOM 事件 <a v-on:click="doSomething">
    var vuebind = new Vue({
      el: '#appbind',
      data:{
        isActive: true
      }
    }); 

    var data2 = { site: "site from data2"}
    //每个 Vue 应用都需要通过实例化 Vue 来实现
    //当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。
      var vm = new Vue({
        //el 参数，它是 DOM 元素中的 id.{{ }} 用于输出对象属性和函数返回值。
        el: '#vue_message',
        data: {
          site: "site_message",
          alexa: "10000"
        },
        methods: {
          details: function() {
            return  this.site + " - 添加内容！"+data2.site;
          }
        }
      })
      document.write(vm.site === data2.site) // true
      document.write("<br>") 

      //使用 v-html 指令用于输出 html 代码
      var vm2 = new Vue({
        el: '#app2',
        data: {
          message: '<h1>vue教程</h1>'
        }
      })

    </script>
  </body>
</html>
